<template>
  <view class="container">
    <view class="collection-list">
      <view v-if="!userInfo" class="empty-tip">
        请先登录
      </view>
      <view v-else-if="collectionList.length === 0" class="empty-tip">
        暂无收藏商品
      </view>
      <view v-else class="goods-list">
        <view class="goods-item" v-for="(goods, index) in collectionList" :key="index">
          <view class="goods-wrapper">
            <image class="collection-icon" 
                   src="/static/images/cancel.png" 
                   @tap.stop="removeCollection(goods)"
                   mode="aspectFit">
            </image>
            <image class="goods-img" :src="goodsImageBaseUrl + goods.image" mode="aspectFill"></image>
            <view class="goods-info">
              <view class="name">{{ goods.name }}</view>
              <view class="description">{{ goods.description }}</view>
              <view class="price-box">
                <view class="price">
                  <text>￥</text>
                  <text class="number">{{ goods.defaultPrice / 100 }}</text>
                </view>
                <view class="btn-box">
                  <button class="add-btn" type="primary" size="mini" @tap="toMenu(goods)">去下单</button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      collectionList: [],
      goodsImageBaseUrl: this.$config.baseUrl + '/static/image/'
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  onShow() {
    if (!this.userInfo) {
      uni.showModal({
        title: '提示',
        content: '请先登录',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/login'
            });
          } else {
            uni.navigateBack();
          }
        }
      });
      return;
    }
    this.getCollectionList();
  },
  methods: {
    async getCollectionList() {
      try {
        // 先获取收藏的商品ID列表
        const collectionResult = await this.$request('/collection/ids', 'get', {
          wxOpenid: this.userInfo.wxOpenid
        });
        
        if (collectionResult.data && collectionResult.data.length > 0) {
          // 根据商品ID列表获取商品详情
          const goodsResult = await this.$request('/goods/list/ids', 'post', {
            goodsIds: collectionResult.data
          });
          if (goodsResult.data) {
            this.collectionList = goodsResult.data;
          }
        } else {
          this.collectionList = [];
        }
      } catch (error) {
        console.error('获取收藏列表失败:', error);
        uni.showToast({
          title: '获取收藏列表失败',
          icon: 'none'
        });
      }
    },
    async removeCollection(goods) {
      try {
        await this.$request('/collection/remove', 'delete', {
          wxOpenid: this.userInfo.wxOpenid,
          goodsId: goods.id
        });
        await this.getCollectionList();
        uni.showToast({
          title: '取消收藏成功',
          icon: 'success'
        });
      } catch (error) {
        uni.showToast({
          title: '取消收藏失败',
          icon: 'none'
        });
      }
    },
    toMenu(goods) {
      // 跳转到菜单页面
      uni.switchTab({
        url: '/pages/menu/menu',
        success: () => {
          // 保存商品信息，用于菜单页面定位到该商品
          uni.setStorageSync('selectedGoods', goods);
        }
      });
    }
  }
}
</script>

<style lang="scss">
@import './collection.scss';
</style> 